{% block context %}
{
    "description": "Product Pricing Plans",
    "keywords": "product, pricing, buy me",
}
{% endblock %}

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h2>Available Pricing Plans</h2>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h4 class="text-center">Starter Plan - Free</h4>
                </div>
                <ul class="list-group list-group-flush text-center">
                    <li class="list-group-item">Feather #1</li>
                    <li class="list-group-item disabled">Feather #2</li>
                    <li class="list-group-item disabled">Feather #3</li>
                </ul>
                <div class="panel-footer">
                    <a class="btn btn-lg btn-block btn-success" href="#">
                        BUY NOW!
                    </a>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h4 class="text-center">Basic Plan - $10 / month</h4>
                </div>
                <ul class="list-group list-group-flush text-center">
                    <li class="list-group-item">Feather #1</li>
                    <li class="list-group-item">Feather #2</li>
                    <li class="list-group-item disabled">Feather #3</li>
                </ul>
                <div class="panel-footer">
                    <a class="btn btn-lg btn-block btn-success" href="#">
                        BUY NOW!
                    </a>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h4 class="text-center">Enterprise Plan - $20 / month</h4>
                </div>
                <ul class="list-group list-group-flush text-center">
                    <li class="list-group-item">Feather #1</li>
                    <li class="list-group-item">Feather #2</li>
                    <li class="list-group-item disabled">Feather #3</li>
                </ul>
                <div class="panel-footer">
                    <a class="btn btn-lg btn-block btn-success" href="#">
                        BUY NOW!
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <p>
                {% lorem %}
            </p>
        </div>
    </div>
</div>
